<template>
	<div class="personal layout-pd">
		<el-row>
			<el-col :span="24">
				<el-card shadow="hover" header="个人信息">
					<div class="personal-user">
						<div class="personal-user-left">
							<img :src="avatar" />
						</div>
						<div class="personal-user-right">
							<el-row>
								<el-col :span="24" class="personal-title mb18"
									>{{ currentTime }}，<span style="color: goldenrod">{{ userInfo.Name }}</span> ~ 【{{ sentence }}】
								</el-col>
								<el-col :span="24">
									<el-row>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">用户名称：</div>
											<div class="personal-item-value">{{ userInfo.Name }}</div>
										</el-col>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">登录IP：</div>
											<div class="personal-item-value">{{ userInfo.LoginIp }}</div>
										</el-col>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">登录时间：</div>
											<div class="personal-item-value">{{ userInfo.LoginTime }}</div>
										</el-col>
									</el-row>
								</el-col>
								<el-col :span="24">
									<el-row>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">用户角色：</div>
											<div class="personal-item-value">{{ userInfo.RoleName }}</div>
										</el-col>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">登录设备：</div>
											<div class="personal-item-value">{{ userInfo.LoginBrowser }}</div>
										</el-col>
										<el-col :xs="24" :sm="8" class="personal-item mb6">
											<div class="personal-item-label">登录地址：</div>
											<div class="personal-item-value">{{ userInfo.LoginAddr }}</div>
										</el-col>
									</el-row>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row class="mt20">
			<el-col :span="24">
				<el-card shadow="hover" header="登录记录">
					<div style="width: 95%; height: 260px" ref="loginLogRef"></div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts" name="personal">
import { ref, computed, onMounted, markRaw } from 'vue';
import { formatAxis } from '/@/utils/formatTime';
import avatar from '/@/assets/image/avatar.webp';
import { Post, Get } from '/@/common/http';
import * as echarts from 'echarts';

const userInfo = ref({
	Name: '',
	RoleName: '',
	LoginIp: '',
	LoginTime: '',
	LoginBrowser: '',
	LoginAddr: '',
});

const currentTime = computed(() => {
	return formatAxis(new Date());
});

const sentence = ref('生活变的再糟糕，也不妨碍我变得更好！');

const getSentence = () => {
	Get('SysPublic/GetSentence').then((res: any) => {
		sentence.value = res.Msg;
	});
};

const loginLogRef = ref();
let loginLogChart: any;
const loginLogLoad = (source: any, xdata: any) => {
	const option = {
		grid: { top: 20, right: 0, bottom: 20, left: 50 },
		xAxis: {
			type: 'category',
			data: xdata,
			axisLabel: {
				rotate: 0,
				textStyle: {
					color: '#303133',
					fontSize: 12,
				},
			},
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				textStyle: {
					color: '#303133',
					fontSize: 12,
				},
			},
			minInterval: 1
		},
		series: source,
		tooltip: { trigger: 'axis' },
	};
	loginLogChart.setOption(option);
};

onMounted(() => {
	getSentence();
	loginLogChart = markRaw(echarts.init(loginLogRef.value));
	Post('SysUser/GetLoginUserInfo', {}, (res: any) => {
		userInfo.value = res.Data;
	});
	Post('SysUser/GetLoginLogs', {}, (res: any) => {
		let source: any[] = [],
			xdata: any[] = [];
		let data = res.Data;

		source.push({
			data: [],
			type: 'line',
			smooth: true,
			symbolSize: 6,
			symbol: 'circle',
			lineStyle: {
				width: 4,
				color: '#fe9a8b',
			},
			itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
			areaStyle: {
				color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
					{ offset: 0, color: '#fe9a8bb3' },
					{ offset: 1, color: '#fe9a8b03' },
				]),
			},
		});
		for (let i = 0; i < data.length; i++) {
			xdata.push(data[i].Time);
			source[0].data.push(data[i].Count);
		}
		loginLogLoad(source, xdata);
	});
});
</script>

<style scoped lang="scss">
.personal {
	.personal-user {
		height: 130px;
		display: flex;
		align-items: center;
		.personal-user-left {
			width: 130px;
			height: 130px;
			border-radius: 3px;
			img {
				width: 100%;
				height: 100%;
				border-radius: 3px;
			}
			&:hover {
				img {
					animation: logoAnimation 0.3s ease-in-out;
				}
			}
		}
		.personal-user-right {
			flex: 1;
			padding: 0 15px;
			.personal-title {
				font-size: 18px;
			}
			.personal-item {
				display: flex;
				align-items: center;
				font-size: 13px;
				line-height: 25px;
				.personal-item-label {
					color: var(--el-text-color-secondary);
					width: 70px;
					text-align: right;
				}
				.personal-item-value {
					font-size: 14px;
				}
			}
		}
	}
}
</style>
